import React, {useEffect, useRef, useState} from 'react';
import {Modal, Tabs, Tag} from "antd";
import useBaseFontSize from "@/hooks/useBaseFontSize.ts";
import AppConfig from "@/config";
import {replacePlaceholders} from "@/utils/util.ts";
import {getCurrentUser, getToken} from "@/utils/authority.ts";
import {ResourceType} from "@/enums/ResourceType.ts";

interface ArchivesProps {
    visible: boolean; //是否显示
    handleClose: (e: React.MouseEvent<HTMLButtonElement>) => void; //关闭方法
    payload?: any; //资源数据
}

//档案弹窗，一景一档等
const Index: React.FC<ArchivesProps> = ({visible, handleClose, payload}) => {

    const baseFontSize = useBaseFontSize();
    const token = getToken();

    const [title, setTitle] = useState<React.ReactNode>()
    const [tabs, setTabs] = useState<any[]>([])
    const data = {...payload, token, "apiUrl": window.location.origin, zoneCode: getCurrentUser().zoneCode};

    useEffect(() => {
        if (visible && payload.type) {
            const type: ResourceType = payload.type;
            const modal = AppConfig.map.components.resource?.modals[type] || AppConfig.map.components.resource?.modals.Default;
            const title = modal?.title || "";
            const tag = modal?.tag || "";
            setTitle(
                <div className="flex items-center">
                    {replacePlaceholders(title, data)}
                    {tag && <Tag className="ml-50 h-80 lh-72">{replacePlaceholders(tag, data)}</Tag>}
                </div>
            )
            console.log(type, modal)
            setTabs(modal?.tabs || []);
        } else {
            setTitle("")
            setTabs([])
        }
    }, [visible, payload])

    const handleTabHeight = (height: string | number) => {
        return typeof height === "number" ? height + "rem" : height;
    }

    const version = useRef(new Date().getTime())

    function addRandomParam(url: string) {
        return url.includes('?') ? `${url}&v=${version.current}` : `${url}?v=${version.current}`;
    }

    return (
        <Modal
            centered={tabs.length <= 1}
            title={title}
            width={1200 * baseFontSize}
            open={visible}
            destroyOnClose
            footer={null}
            onCancel={handleClose}
            focusTriggerAfterClose={false}
        >{
            tabs.length === 1
                ? (<iframe style={{height: handleTabHeight(tabs[0].height)}} className='w-full border-none'
                           src={addRandomParam(replacePlaceholders(tabs[0].url, data))}/>)
                : (
                    tabs.length > 1 &&
                    <Tabs items={
                        tabs.map((item: any) => ({
                            key: item.label,
                            label: item.label,
                            children: <iframe style={{height: handleTabHeight(item.height)}} className='w-full  border-none'
                                              src={addRandomParam(replacePlaceholders(item.url, data))}/>
                        }))
                    }/>
                )
        }</Modal>
    );
};

export default Index;